import {View, Text} from '@tarojs/components'
import {useLoad} from '@tarojs/taro'
import {useRef} from "react";
import AssetImage from "@/common/AssetImage";
import {Image} from "@antmjs/vantui";

import Utils from "@/utils/common";
import RouthPath from "@/common/RouthPath";
import './index.less'

definePageConfig({
  navigationBarTitleText: '首页'
})

interface IndexItemModel {
  title: string,
  image: any
}

export default function Index() {
  useLoad(() => {
    console.log('Page loaded.')
  })
  const items = useRef<IndexItemModel[]>([
    {
      title: '创建预约订单',
      image: AssetImage.OrderCreate
    },
    {
      title: '查看预约情况',
      image: AssetImage.Order

    },
    {
      title: '订单号查询',
      image: AssetImage.tab3
    }
  ]);

  return (
    <View style={{
      height: '100VH',
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      padding: '20px',
      boxSizing: 'border-box',
      alignItems: 'center',
      justifyContent: 'center'
    }}
    >
      <View className='gridLayout300'>
        {
          items.current.map((item, index) => {
            return (
              <View key={index} style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                //添加边框
                border: '1px solid #ccc',
              }} onClick={() => {
                if (index % 3 === 0) {
                  Utils.navigateTo({
                    url: RouthPath.projectBook
                  })
                } else if (index % 3 === 1) {
                  Utils.navigateTo({
                    url: RouthPath.machineList
                  })
                } else if (index % 3 === 2) {
                  Utils.navigateTo({
                    url: RouthPath.searchOrder
                  })
                }
              }}
              >
                <View>
                  <Image src={item.image}></Image>
                </View>
                <View>
                  <Text>{item.title}</Text>
                </View>

              </View>
            )
          })
        }
      </View>
    </View>
  )
}
